<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
    import * as echarts from 'echarts'

    require('echarts/theme/macarons') // echarts theme
    import resize from './mixins/resize'
    import {mapGetters} from "vuex";
    const ICON_LIST = {
        down: {
            color: '#6BB05B',
            icon: 'el-icon-caret-bottom'
        },
        up: {
            color: '#DE7C1E',
            icon: 'el-icon-caret-top'
        },
        flat: {
            color: '#666666',
            icon: 'el-icon-minus'
        }
    }

    export default {
        mixins: [resize],
        computed: {
            ...mapGetters(["colorName"]),
        },
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '350px'
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            chartData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                chart: null
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler(val) {
                    this.setOptions(val)
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')
                this.setOptions(this.chartData)
            },
            setOptions(data) {
                let date = Object.keys(data)
                let expectedData = date.map(item => {
                    return data[item].count
                })

                this.chart.setOption({

                    xAxis: {
                        type: 'category',
                        data: date,
                        boundaryGap: false,
                        splitLine: {
                            show: true //打开垂直网格线
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#666666',//左边线的颜色
                                width: '2'//坐标线的宽度
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#666666',//坐标值得具体的颜色

                            }
                        }
                    },
                    color: [this.colorName],
                    grid: {
                        left: 10,
                        right: 50,
                        bottom: 20,
                        top: 30,
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgb(255,255,255)',
                        axisPointer: {
                            type: 'cross'
                        },
                        padding: [5, 10],
                        formatter(params) {
                            let key = params[0].axisValue;
                            let str = '';

                            let yearIcon = ICON_LIST[data[key].yearTrend].icon;
                            let yearColor = ICON_LIST[data[key].yearTrend].color;
                            let monthIcon = ICON_LIST[data[key].monthTrend].icon;
                            let monthColor = ICON_LIST[data[key].monthTrend].color;

                            str += `当前日期：${key}<br>`;
                            str += `消费笔数：${data[key].count}<br>`
                            str += `消费${data[key].chartDataType==='count'?'笔数':'金额'}：${data[key].count}<br>`
                            str += '同&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;比：'
                            str += `<span style="color:${yearColor}"><i class="${yearIcon}"></i>${data[key].yearContrast}</span><br/>`
                            str += '环&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;比：'
                            str += `<span style="color:${monthColor}"><i class="${monthIcon}"></i>${data[key].monthContrast}</span><br/>`
                            return str;
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: false //关闭横向网格线
                        },
                        splitArea: {
                            show: false //关闭横向网格背景
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#666666',//左边线的颜色
                                width: '2'//坐标线的宽度
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#666666',//坐标值得具体的颜色

                            }
                        }
                    },
                    series: [{
                        name: '消费笔数',
                        itemStyle: {
                            normal: {
                                color: this.colorName,
                                lineStyle: {
                                    color: this.colorName,
                                    width: 2
                                },
                                areaStyle: { //显示面积
                                    type: 'default',
                                    opacity: 0.3
                                }
                            }
                        },
                        type: 'line',
                        data: expectedData,
                        animationDuration: 1000
                    }
                    ]
                })
            }
        }
    }
</script>
